<!--
 * new page
 * @author: sunYihui
 * @since: 2024-09-02
 * TableView.vue
-->
<template>
    <div class="counts">
        <div class="counts_top">
            数据统计
        </div>
        <div class="counts_box">
            <div class="sum_left">
                <div class="home">
                    房间总数：<div class="red">{{ data.houses }}</div>
                </div>
                <div class="home">
                    居民总数：<div class="red">{{ data.users }}</div>
                </div>
                <div class="home">
                    商店总数：<div class="red">{{ data.stores }}</div>
                </div>
            </div>
            <div class="sum_right">
                <div class="repair_sum">
                    报修总数：<div class="red">{{ data.repairs }}</div>
                </div>
                <div class="repair_sum">
                    投诉总数：<div class="red">{{ data.questions }}</div>
                </div>
            </div>
        </div>

    </div>
    <!-- 首页第二行表格 -->
    <div class="counts">
        <div class="counts_top">
            今日数据变动
        </div>
        <div class="counts_box">
            <div class="sum_left">
                <div class="home">
                    新增维修：<div class="red">{{ data.todayRepairs }}</div>&nbsp;&nbsp; 处
                    <div class="home_box"></div>
                </div>
                <div class="home">
                    未报修处理：<div class="red">{{ data.notFinishedRepairs }}</div>&nbsp;&nbsp; 处
                    <div class="home_box"></div>
                </div>
                <div class="home">
                    新增投诉：<div class="red">{{ data.todayQuestions }}</div>&nbsp;&nbsp;处
                    <div class="home_box"></div>
                </div>
                <div class="home">
                    未处理投诉：<div class="red">{{ data.notAnswer }}</div>&nbsp;&nbsp; 处
                    <div class="home_box"></div>
                </div>
            </div>
            <div class="sum_right">

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { dataSum } from '../../service/login/login'
import { DataNum } from '../../service/login/type'
import { reactive, onMounted } from 'vue';
let data = reactive<DataNum>({
    houses: 0,
    users: 0,
    stores: 0,
    questions: 0,
    repairs: 0,
    todayRepairs: 0,
    notFinishedRepairs: 0,
    todayQuestions: 0,
    notAnswer: 0,
})


const getSum = async () => {
    const res = await dataSum()
    console.log(res);
    Object.assign(data, res.data)
    console.log(111, data);
}

onMounted(() => {
    getSum()
})
</script>

<style lang="less" scoped>
.counts {
    height: 150px;
    background-color: #fff;
    box-shadow: 0px 0px 50px #0000001a;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
    .counts_top {
        font-size: 13px;
        margin: 15px 0;
    }

    .counts_box {
        width: 100%;
        height: 80px;
        // background-color: yellow;
        border: 1px solid #dddddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        padding: 0 25px;
        box-sizing: border-box;

        .sum_left {
            display: flex;

            .home {
                display: flex;
                align-items: center;
                margin-left: 20px;
            }
        }

        .sum_right {
            display: flex;

            .repair_sum {
                display: flex;
                align-items: baseline;
                margin-right: 20px;
            }
        }

        .red {
            font-size: 22px;
            color: #ff0000;
            margin-bottom: 5px;
        }

        .home_box {
            width: 30px;
            height: 30px;
            border-right: 1px solid #cccccc;
            // background-color: red;
        }
    }
}
</style>
